<template>
  <el-container>
    <el-header>
      <home-header ref="header"></home-header>
    </el-header>
    <el-container class="main-wrapper">
      <div>
        <backdrop1>
          <div class="title-stock">
            <span class="stock-title">企业公告</span>
            <span class="stock-title-en">STOCK DETAILS</span>
          </div>
        </backdrop1>
      </div>
      <el-main>
        <div class="fat">
          <div
            class="table-box "
            :style="color == 'black-bg'?'margin-top: 100px;':'margin-top: 200px;'"
          >
            <div class="notice">
              <div class="table-search">
                <el-row type="flex" justify="end">
                  <el-col :span="8">
                    <div class="test">
                      <div
                        class="new-btn"
                        @click="clickIndexTitle(1)"
                        :class="currIndexTitle == 1?'currIndexTitle':''"
                      >
                        <span>新闻资讯</span>
                      </div>
                      <div
                        class="notice-btn"
                        @click="clickIndexTitle(2)"
                        :class="currIndexTitle == 2?'currIndexTitle':''"
                      >
                        <span>通知公告</span>
                      </div>

                      <!-- <el-input v-model="form.stock" placeholder="请输入股票代码和股票" class="search-public"> -->
                      <!-- <el-button @click="getList" slot="append" icon="iconfont  icon-search"></el-button> -->
                      <!-- </el-input> -->
                      <!-- <span @click="getList" class="iconfont icon-search search-stock"></span> -->
                    </div>
                  </el-col>
                </el-row>
              </div>
              <div class="announcement">
                <div
                  class="special"
                  v-for="(item, index) in noticeList"
                  :key="index"
                  v-if="index < 1 "
                >
                  <div class="special-cont">
                    <img :src="item.imgurl" alt />
                  </div>
                  <div class="left">
                    <h3>{{item.title || item.artTitle}}</h3>
                    <p>{{item.content || item.artSummary}}</p>
                    <div class="more">
                      <div class="more-cont" @click="toDetails(item,index)">
                        <span>点击查看更多</span>
                        <span class="iconfont icon-direction-right"></span>
                      </div>
                      <div class="browse">
                        <span class="iconfont icon-liulan"></span>
                        <span>浏览量：{{item.views}}</span>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="cont-list"
                  @mouseenter="mouseenter(item,index)"
                  @mouseleave="mouseleave(item,index)"
                  v-for="(item, index) in noticeList"
                  @click="toDetails(item,index)"
                  :key="index+1"
                >
                  <div class="left">
                    <div :class="currentIndex == index?'left-dateyes':'left-date'">
                      <div class="left-tian">{{(new Date(item.addTime)).getDate()}}</div>
                      <div
                        class="left-data"
                      >{{(new Date(item.addTime)).getFullYear()}}.{{(new Date(item.addTime)).getMonth()}}</div>
                    </div>
                    <div class="left-cont">
                      <h3>{{item.title || item.artTitle}}</h3>
                      <p>{{item.content || item.artSummary}}</p>
                      <div class="browse">
                        <span class="iconfont icon-liulan"></span>
                        <span>浏览量：{{item.views}}</span>
                      </div>
                    </div>
                  </div>
                  <div class="right">
                    <div :class="currentIndex == index?'circleyes':'circle'">
                      <span class="iconfont icon-youjiantou"></span>
                    </div>
                  </div>
                </div>
              </div>

              <div class="page-box text-center">
                <!-- <a class="more-btn" href="javascript:;">
          加载更多
          <i class="iconfont icon-xiasanjiao"></i>
                </a>-->
                <el-pagination
                  class="pull-right"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="noticeList.pageNum"
                  :page-sizes="[10, 20, 30, 40,50]"
                  :page-size="employPageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total"
                ></el-pagination>
              </div>
            </div>
          </div>
        </div>

        <newFooter class="newFooter"></newFooter>
        <!-- <home-footer :siteInfo="siteInfo"></home-footer> -->
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import HomeHeader from "../../components/HeaderOrder";
import backdrop1 from "@/components/backdrop1.vue";
import newFooter from "@/components/newFooter.vue";

import { mapState } from "vuex";
import * as api from "@/axios/api.js";

export default {
  components: {
    HomeHeader,
    backdrop1,
    newFooter,
  },
  computed: {
    ...mapState({
      color: (state) => state.systemColor,
    }),
  },
  data() {
    return {
      employPageSize: 0,
      employPageNum: 0,
      total: 0,
      currentIndex: -1,
      noticeList: [],
      currIndexTitle: 1,
      pageNum: 1,
      pageSize: 10,
    };
  },
  created() {
    this.getNoticeList();
  },
  methods: {
    toDetails(item, index) {
      this.$router.push({
        path: "/enterprise-details",
        query: {
          id: item.id,
        },
      });
    },
    async handleSizeChange(size) {
      console.log(size);
      if (this.currIndexTitle == 1) {
          let opts = {
          pageNum: this.pageNum,
          pageSize: size,
          type:1
        };
        let data = await api.getNewsList(opts);
        if (data.status == 0) {
          this.noticeList = data.data.list;
        }
        // 新闻资讯
      } else {
        // 通知公告
        let opts = {
          pageNum: this.pageNum,
          pageSize: size,
        };
        let data = await api.getArtList(opts);
        if (data.status == 0) {
          this.noticeList = data.data.list;
        }
      }
      // this.handleOptions({ pageSize: size })
      // this.getData()
    },
    async handleCurrentChange(page) {
      if (this.currIndexTitle == 1) {
        // 新闻资讯
         let opts = {
          pageNum: page,
          pageSize: this.pageSize,
          type:1
        };
        let data = await api.getNewsList(opts);
        if (data.status == 0) {
          this.noticeList = data.data.list;
        }
      } else {
        // 通知公告
        let opts = {
          pageNum: page,
          pageSize: this.pageSize,
        };
        let data = await api.getArtList(opts);
        if (data.status == 0) {
          // this.employPageSize = data.data.pageSize
          // this.employPageNum = data.data.pageNum
          // this.total = data.data.total
          // this.switchData(data.data.list, "addTime");
          this.noticeList = data.data.list;
        }
      }
      console.log(page);
      // this.handleOptions({ pageNum: page })
      // this.getData()
    },
    // 时间转换
    switchData(list, time) {
      list.forEach((item) => {
        var tempStr = item[time] + "";
        var timestamp = tempStr.slice(0, tempStr.length - 3);
        var newDate = new Date();
        newDate.setTime(timestamp * 1000);
        item[time] = newDate.toLocaleDateString();
      });
    },

    async clickIndexTitle(type) {
      this.currIndexTitle = type;
      if (this.currIndexTitle == 1) {
        // 新闻资讯
        var query = {
          pageSize: 10,
        };
        let data = await api.getTransactionNewList(query);
        if (data.status == 0) {
          this.switchData(data.data.list, "addTime");
          this.noticeList = data.data.list;
        }
      } else if (this.currIndexTitle == 2) {
        // 通知公告
        let opts = {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
        };
        let data = await api.getArtList(opts);
        if (data.status == 0) {
          this.employPageSize = data.data.pageSize;
          this.employPageNum = data.data.pageNum;
          this.total = data.data.total;
          // this.switchData(data.data.list, "addTime");
          this.noticeList = data.data.list;
        }
      }
    },
    mouseenter(item, index) {
      this.currentIndex = index;
    },
    mouseleave(item, index) {
      this.currentIndex = -1;
    },
    async getNoticeList() {
      // 获取新闻列表列表
      var query = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        type: 1,
      };
      var data = await api.getNewsList(query);
      if (data.status == 0) {
        this.employPageSize = data.data.pageSize;
        this.employPageNum = data.data.pageNum;
        this.total = data.data.total;
        // this.switchData(data.data.list, "addTime");
        this.noticeList = data.data.list;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.newFooter{
  position: relative;
  z-index: 9999;
}
/deep/.red-bg .el-container {
  background: #e9e9e9;
}

/deep/ .el-main {
  // background-color: rgb(233, 233, 233);
  padding: 0;
  margin-left: 0;
}
.red-bg{
	.stock-title{
		font-size: 36px;
	}
	.stock-title-en{
		font-size: 22px;
	}
}
.black-bg {
	.title-stock{
		width: 1200px;
		margin: 250px auto;
		margin-top:250px;
	}
	.stock-title{
		font-size: 36px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #FFFFFF;
	}
	.stock-title-en{
		font-size: 22px;
		font-weight: 400;
		color: #E6003E;
		line-height: 36px;
	}
  .table-box {
    margin-bottom: 100px;
    width: 1200px;
    margin: 0 auto;
    // box-shadow: inset 20px 20px 20px -10px #000;
    background-image: radial-gradient(#15414d 5%, #103046, #103046);
    color: #fff;
    .page-box {
      background: none;
    }
    .cont-list {
      cursor: pointer;
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .circle {
        width: 25px;
        height: 25px;
        border-radius: 50%;
        border: 2px solid rgb(133, 133, 133);
        display: flex;
        align-items: center;
        justify-content: center;
        span {
          color: rgb(193, 24, 21);
          font-size: 13px;
        }
      }
      .circleyes {
        width: 25px;
        height: 25px;
        border-radius: 50%;
        //   border: 2px solid #;
        border: 2px solid rgb(193, 24, 21);
        background-color: rgb(193, 24, 21);
        display: flex;
        align-items: center;
        justify-content: center;
        span {
          color: #fff;
          font-size: 13px;
        }
      }
      .left {
        display: flex;
        width: 100%;
        .left-date {
          width: 130px;
          height: 80px;
          border: 3px solid rgba(142, 142, 142, 0.24);
          margin-right: 20px;
          .left-tian {
            margin-top: 5px;
            font-size: 38px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #fff;

            text-align: center;
            margin-bottom: 8px;
          }
          .left-data {
            text-align: center;
            margin-top: 5px;
          }
        }
        .left-dateyes {
          width: 130px;
          height: 80px;
          background-color: rgb(193, 24, 21);
          border: 3px solid rgba(193, 24, 21);

          margin-right: 20px;
          color: #fff;
          .left-tian {
            margin-top: 5px;
            font-size: 38px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #fff;
            text-align: center;
            margin-bottom: 8px;
          }
          .left-data {
            text-align: center;
            margin-top: 5px;
          }
        }
        .left-cont {
          width: 80%;
          h3 {
            font-weight: bold;
          }
          p {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            line-height: 22px;
            font-size: 12px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #fff;

            line-height: 21px;
            opacity: 0.7;
            margin-top: 10px;
          }
          .browse {
            display: flex;
            align-items: center;
            font-size: 12px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #fff;
          }
        }
      }
    }
    .notice {
      padding: 0 30px 40px 40px;
    }
    .special {
      display: flex;
      // border: 1px solid #ccc;
      background-color: rgba(32, 67, 90, 0.5);
      .left {
        padding: 20px 10px;
        box-sizing: border-box;
        width: 70%;
        .more {
          display: flex;
          margin-top: 20px;
          align-items: center;
          .browse {
            display: flex;
            align-items: center;
            font-size: 12px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #fff;

            line-height: 36px;
          }
          .more-cont {
            background: #c11815;
            width: 139px;
            height: 34px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 13px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #ffffff;
            line-height: 36px;
            text-align: center;
            margin-right: 20px;
          }
        }
        h3 {
          font-weight: bold;
        }
        p {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          line-height: 22px;
          font-size: 12px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #fff;

          line-height: 28px;
          opacity: 0.7;
        }
      }
      .special-cont {
        width: 300px;
        height: 170px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .test {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;

      .new-btn {
        width: 189px;
        height: 46px;
        border-radius: 23px;
        text-align: center;
        line-height: 46px;
        background: #000000;

        position: relative;
        right: 20px;
        cursor: pointer;

        span {
          width: 64px;
          height: 16px;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #ffffff;
          line-height: 36px;
          text-align: center;
        }
      }
      .notice-btn {
        width: 189px;
        height: 46px;
        background: #000000;
        border-radius: 23px;
        text-align: center;
        line-height: 46px;
        margin-left: 50px;
        position: relative;
        left: 20px;
        cursor: pointer;
        span {
          display: inline-flex;
          width: 64px;
          height: 15px;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #ffffff;
        }
      }
      .currIndexTitle {
        background: #c11815;
      }
    }
  }
}
.red-bg {
	.title-stock{
		width: 1200px;
		margin: 250px auto;
		margin-top:200px;
	}
  .table-box {
    margin-bottom: 100px;
    width: 1200px;
    margin: 0 auto;
    .page-box {
      background: none;
    }
    .cont-list {
      cursor: pointer;
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .circle {
        width: 25px;
        height: 25px;
        border-radius: 50%;
        border: 2px solid #ccc;
        display: flex;
        align-items: center;
        justify-content: center;
        span {
          color: rgb(193, 24, 21);
          font-size: 13px;
        }
      }
      .circleyes {
        width: 25px;
        height: 25px;
        border-radius: 50%;
        //   border: 2px solid #;
        border: 2px solid rgb(193, 24, 21);
        background-color: rgb(193, 24, 21);
        display: flex;
        align-items: center;
        justify-content: center;
        span {
          color: #fff;
          font-size: 13px;
        }
      }
      .left {
        display: flex;
        width: 100%;
        .left-date {
          width: 130px;
          height: 80px;
          border: 3px solid rgba(142, 142, 142, 0.24);
          margin-right: 20px;
          .left-tian {
            margin-top: 5px;
            font-size: 38px;
            font-weight: 400;
            color: #000;
            text-align: center;
            margin-bottom: 8px;
          }
          .left-data {
            text-align: center;
            margin-top: 5px;
          }
        }
        .left-dateyes {
          width: 130px;
          height: 80px;
          background-color: rgb(193, 24, 21);
          border: 3px solid rgba(193, 24, 21);

          margin-right: 20px;
          color: #fff;
          .left-tian {
            margin-top: 5px;
            font-size: 38px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #fff;
            text-align: center;
            margin-bottom: 8px;
          }
          .left-data {
            text-align: center;
            margin-top: 5px;
          }
        }
        .left-cont {
          width: 80%;
          h3 {
            font-weight: bold;
          }
          p {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            line-height: 22px;
            font-size: 12px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #000000;
            line-height: 21px;
            opacity: 0.7;
            margin-top: 10px;
          }
          .browse {
            display: flex;
            align-items: center;
            font-size: 12px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #000000;
          }
        }
      }
    }
    .notice {
      padding: 0 30px 40px 40px;
    }
    .special {
      display: flex;
      border: 1px solid #ccc;
      .left {
        padding: 20px 10px;
        box-sizing: border-box;
        width: 70%;
        .more {
          display: flex;
          margin-top: 20px;
          align-items: center;
          .browse {
            display: flex;
            align-items: center;
            font-size: 12px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #000000;
            line-height: 36px;
          }
          .more-cont {
            background: #c11815;
            width: 139px;
            height: 34px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 13px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #ffffff;
            line-height: 36px;
            text-align: center;
            margin-right: 20px;
          }
        }
        h3 {
          font-weight: bold;
        }
        p {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          line-height: 22px;
          font-size: 12px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #000000;
          line-height: 28px;
          opacity: 0.7;
        }
      }
      .special-cont {
        width: 300px;
        height: 170px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .test {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;

      .new-btn {
        width: 189px;
        height: 46px;
        border-radius: 23px;
        text-align: center;
        line-height: 46px;
        background: #000000;

        position: relative;
        right: 20px;
        cursor: pointer;

        span {
          width: 64px;
          height: 16px;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #ffffff;
          line-height: 36px;
          text-align: center;
        }
      }
      .notice-btn {
        width: 189px;
        height: 46px;
        background: #000000;
        border-radius: 23px;
        text-align: center;
        line-height: 46px;
        margin-left: 50px;
        position: relative;
        left: 20px;
        cursor: pointer;
        span {
          display: inline-flex;
          width: 64px;
          height: 15px;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #ffffff;
        }
      }
      .currIndexTitle {
        background: #c11815;
      }
    }
  }
}

.table-search {
  padding: 20px 0;
}
.table-search > div {
  justify-content: center !important;
}
// /deep/ .el-main{
//   padding: 0;
//   .table-box[data-v-ebd8dd76] {
//     width: 100%;
//     .table-search{
//       width: 1200px;
//       margin: 0 auto;
//     }
//     .table-title{

//     }
//   }
//   div[data-v-ebd8dd76]{
//     position: relative;
//     background-color: pink;
//   }
// }
</style>
